<template>
  <v-card>
      <v-layout row>
        <!-- 商品分类 -->
        <v-flex xs3>
          <v-card>
            <v-card-title>选择分类，查看规格参数模板：</v-card-title>
            <v-divider/>
              <v-tree url="/item/category/list"
                  :isEdit="false"
                  @handleClick="handleClick"
          />
          </v-card>
        </v-flex>
        <!-- 规格参数 -->
        <v-flex xs9 class="px-1" v-show="authorize.gpage">
          <v-card class="elevation-0" v-show="currentNode.id">
              <v-card-title v-if="!currentNode.path">
                请先选择一个分类
              </v-card-title>         
            <v-breadcrumbs dense v-else>
                <v-icon slot="divider">chevron_right</v-icon>
                <v-breadcrumbs-item
                    v-for="(item,i) in items"
                    :key="i"
                >
                    <span v-if="i === 2" @click="back">{{ item }}</span>
                    <span v-else>{{ item }}</span>
                </v-breadcrumbs-item>
            </v-breadcrumbs>
            <v-divider/>
            <v-card-text>
              <spec-group :authorize="authorize" :cid="currentNode.id" v-show="showGroup" @select="selectGroup"/>
              <spec-param :authorize="authorize" :group="group" v-show="!showGroup" />
            </v-card-text>
          </v-card>
        </v-flex>
      </v-layout>
  </v-card>
</template>

<script>

export default {
  name: "v-spec",
  data() {
    return {
      currentNode: {}, // 当前被选中的商品分类节点
      group:{}, // 被选中的分组
      showGroup:true, // 是否展示分组
      authorize:{gpage:false,gadd:false,gedit:false,gdelete:false,ppage:false,padd:false,pedit:false,pdelete:false}
    };
  },
  created(){
    this.$http({
      method: 'GET',
      url: '/user/author/query/other/auth?url='+this.$route.path,
      headers: {"x-authorize-token":this.$storeGet("L_TOKEN")}
    }).then((resp) => {
      if(resp.data.code == 1){
        resp.data.data.forEach(m => {
          if(m.url == '/item/spec/groups/*' && m.method == "GET"){
            this.authorize.gpage=true;
          }
          if(m.url == "/item/spec/params" && m.method == "POST"){
            this.authorize.ppage=true;
          }
          if(m.url == "/item/spec/group" && m.method == "POST"){
            this.authorize.gadd=true;
          }
          if(m.url == "/item/spec/group" && m.method == "PUT"){
            this.authorize.gedit=true;
          }
          if(m.url == "/item/spec/group/*" && m.method == "DELETE"){
            this.authorize.gdelete=true;
          }

          if(m.url == "/item/spec/param" && m.method == "POST"){
            this.authorize.padd=true;
          }
          if(m.url == "/item/spec/param" && m.method == "PUT"){
            this.authorize.pedit=true;
          }
          if(m.url == "/item/spec/param/*" && m.method == "DELETE"){
            this.authorize.pdelete=true;
          }
        })
      }else{
        this.$message.error(resp.data.message);
      }
    }).catch(() => {
      this.$message.error("服务器异常");
    });
  },
  methods: {
    // 分类点击后的弹窗
    handleClick(node) {
      // 判断点击的节点是否是父节点（只有点击到叶子节点才会展示规格）
      if (!node.isParent) {
        // 把当前点击的节点记录下来
        this.currentNode = node;
        // 显示规格组
        this.showGroup = true;
        // 记录选中的规格组，默认为空
        this.group = {};
      }
    },
    selectGroup(group){
      // 记录选中的分组
      this.group = group;
      // 不再显示分组，而是显示规格参数
      this.showGroup = false;
    },
    back(){
        this.showGroup = true;
        this.group = {};
    }
  },
  components:{
      SpecGroup: () => import('./SpecGroup.vue'),
      SpecParam: () => import('./SpecParam.vue'),
  },
  computed:{
      items(){
          const items = this.currentNode.path;
          if(this.group.name){
              items[3] = this.group.name;
          }
          return items;
      }
  }
};
</script>

<style scoped>
</style>
